<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="js/lib/jquery-2.0.2.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<script type="text/javascript">
	$(function() {
		$('#addressSubmit').click(function() {
			var geocoder = new google.maps.Geocoder();
			var address = $('#address').val();
			var mapDiv = document.getElementById('map');
			var myOptions = {
					zoom : 18,
					mapTypeId : google.maps.MapTypeId.ROADMAP
				};
			
			map = new google.maps.Map(mapDiv, myOptions);
			console.log(address);
			geocoder.geocode({"address" : address}, function(results, status) {
				
				console.log('X = '+results[0].geometry.location.pb);
				console.log('Y = '+results[0].geometry.location.ob);
				console.log(results[0].geometry.location);
				$('#X').html(results[0].geometry.location.pb);
				$('#Y').html(results[0].geometry.location.ob);
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					position : results[0].geometry.location
					, map : map
					, title : address
				});
			});
		});
	});
</script>
<body>
	<input id="address" type="text"/>
	<button id="addressSubmit">送出</button>
	<div>
		<span>X:</span>
		<span id="X"></span>
	</div>
	<div>
		<span>Y:</span>
		<span id="Y"></span>
	</div>
	<div id="map" style="height: 500px; width: 500px;"></div>
</body>
</html>	